var CapsLockValue=0;
NS = (document.layers) ? 1 : 0;

<!-- the soft keyboard style and body to display -->
var style1 = 				"<style>";
var style_btn_letter =  	".btn_letter {BORDER-RIGHT: 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: 1px solid; PADDING-LEFT: 2px;" +
							"FONT-SIZE: 14px; BORDER-LEFT: 1px solid; CURSOR: hand;PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid; width:25px; height:20px;}";
var style_btn_num =			".btn_num {width:25px;BORDER-RIGHT:1px solid; PADDING-RIGHT: 1px; BORDER-TOP: 1px solid; PADDING-LEFT: 2px;" +
							" FONT-SIZE: 12px; BORDER-LEFT: 1px solid; CURSOR: hand; PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid;height:20px;}";
var style_btn_skb = 		".skb {position:absolute; left:0px; top:0px; width:400px; z-index:180;display:none}";
var style_btn_useKeyboard = ".useKeyboard {display:block; height:20px; float:right; } .useKeyboard:hover{cursor:hand;}";
style1 += style_btn_letter+style_btn_num+style_btn_skb+style_btn_useKeyboard+"</style>";	
																						
var keyboard_content = "<div align=center id=softkeyboard name=softkeyboard class=skb>" +
	"<table id=CalcTable  border=0 align=center cellpadding=0 cellspacing=0 >" +
	"<form id=Calc name=Calc method=post autocomplete=off>" +
	"<tr><td title=\"we suggest you use soft keyboard to input\" style=\"height:30\">" +
		"<input type=hidden name=password id=password><input type=hidden value=ok name=action2>" +
		"<span id=useKey class=useKeyboard onClick=\"password1.readOnly=0;password1.focus();closekeyboard();password1.value='';\">使用键盘输入</span>" +
		"</td></tr>" +
	"<tr align=center>" +
	"<td align=center bgcolor=\"#FFFFFF\">" +
	"<table align=center width=\"%\" border=0 cellspacing=1 cellpadding=0>\n" +
	"<tr align=left valign=middle> \n" +
		"<td><input type=button value=\" ~ \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" ! \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" @ \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" # \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" $ \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" % \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" ^ \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" & \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" * \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" ( \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" ) \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" _ \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" + \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" | \" onClick=addClickedValue(this) ></td>\n" +
		"<td colspan=1 rowspan=2><input name=button10 type=button value=退格 onclick=setPassValue(); style=\"width:100px;height:40px\"> \n</td>\n</tr>\n" +
	"<tr align=left valign=middle> \n" +
		"<td><input type=button value=\" ` \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number1 value=1 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number2 value=2 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number3 value=3 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number4 value=4 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number5 value=5 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number6 value=6 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number7 value=7 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number8 value=8 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number9 value=9 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_number0 value=0 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" - \"  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" = \"  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" \\ \" onClick=addClickedValue(this) ></td>\n" +
		"<td> </td>\n</tr>\n" +
	"<tr align=left valign=middle> \n" +
		"<td><input type=button name=button_letter1 value= q  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter2 value= w  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter3 value= e  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter4 value= r  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter5 value= t  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter6 value= y  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter7 value= u  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter8 value= i  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter9 value= o  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter10 value= p  onClick=addClickedValue(this) ></td>\n" +
		"<td><Input type=button value=\" { \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" } \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" [ \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" ] \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button onClick=\"capsLockClicked();setCapsLock();\" value=切换大/小写 style=\"width:100px;\"></td>\n</tr>\n" +
	"<tr align=left valign=middle> \n" +
		"<td><input type=button name=button_letter11 value= a  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter12 value= s  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter13 value= d  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter14 value= f  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter15 value= g  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter16 value= h  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter17 value= j  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter18 value= k  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button name=button_letter19 value= l  onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" : \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" &quot; \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" ; \" onClick=addClickedValue(this) ></td>\n" +
		"<td> <input type=button value=\" ' \" onClick=addClickedValue(this) ></td>\n" +
		"<td rowspan=2 colspan=2> <input name=button12 type=button onclick=\"endInput();\" value=确定 style=\"width:126px;height:42px;\"></td>\n</tr>\n" +
	"<tr align=left valign=middle> \n" +
		"<td><input type=button name=button_letter20 value= z onClick=addClickedValue(this)  ></td>\n" +
		"<td><input type=button name=button_letter21 value= x onClick=addClickedValue(this)  ></td>\n" +
		"<td><input type=button name=button_letter22 value= c onClick=addClickedValue(this)  ></td>\n" +
		"<td><input type=button name=button_letter23 value= v onClick=addClickedValue(this)  ></td>\n" +
		"<td><input type=button name=button_letter24 value= b onClick=addClickedValue(this)  ></td>\n" +
		"<td><input type=button name=button_letter25 value= n onClick=addClickedValue(this)  ></td>\n" +
		"<td><input type=button name=button_letter26 value= m onClick=addClickedValue(this)  ></td>\n" +
		"<td><input type=button value=\" &lt; \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" &gt; \" onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" ? \" 	 onClick=addClickedValue(this) ></td>\n" +
		"<td><input type=button value=\" , \" 	 onClick=addClickedValue(this) ></td>\n " +
		"<td><input type=button value=\" . \"	 onClick=addClickedValue(this) ></td>\n " +
		"<td><input type=button value=\" / \"	 onClick=addClickedValue(this) ></td>\n</tr>\n" +
	"</table></td></tr></form></table></div>";
document.write(style1);
document.write(keyboard_content);

function addValue(newValue){
	document.getElementById('password').value += newValue;
	document.getElementById('password1').value=document.getElementById('password').value;
}

function addClickedValue(obj){
	addValue(obj.value);
}

function setPassValue(){
	var password1 = document.getElementById('password1');
	var longnum=document.getElementById("password").value.length;
	var num=document.getElementById("password").value.substr(0,longnum-1);
	document.getElementById("password").value=num;
	password1.value=num;
}

function endInput(){
	var password1 = document.getElementById('password1');
	password1.value=document.getElementById("password").value;
	closekeyboard();
	document.getElementById("password").value = "";
	password1.readOnly=1;
}

function closekeyboard(){
	var softkeyboard = document.getElementById("softkeyboard");
	softkeyboard.style.display="none";
}

function showkeyboard(){
	var softkeyboard = document.getElementById("softkeyboard");
	var password1 = document.getElementById('password1');
	softkeyboard.style.display="block";
	password1.readOnly=1;
	password1.blur();
	document.getElementById("useKey").focus();
}

function setCapsLock(){
	if (CapsLockValue==0){
		CapsLockValue=1
	}else{CapsLockValue=0}
}

function setCalcborder(){
	document.getElementById("CalcTable").style.border="1px solid #B5ADF1"
}


function addClickEventToButtons(element_i){
	alert('hi');
	var thisButtonValue=element_i.value;
	addValue(thisButtonValue);
}

function setCalcButtonBg(){
	var Calc = document.getElementById("Calc");
	for(var i=0;i<Calc.elements.length;i++){
		if(Calc.elements[i].type=="button"&&Calc.elements[i].value){
			if(Calc.elements[i].name.substr(0,13)=="button_number"){
				Calc.elements[i].className="btn_num";
			}
			if(Calc.elements[i].name.substr(0,13)=="button_letter"){
				Calc.elements[i].className="btn_letter";
			}
		}
	}
}


function initCalc(){
	setCalcborder();
	setCalcButtonBg();
}


//大小写切换 caps lock
var capsLockFlag=true;
function capsLockClicked(){
	var Calc = document.getElementById("Calc");
	if(capsLockFlag){
		for(var i=0;i<Calc.elements.length;i++){
		var _char=Calc.elements[i].value;
		if(Calc.elements[i].type=="button"&&_char>="a"&&_char<="z"&&_char.length==1){
				Calc.elements[i].value=" "+String.fromCharCode(_char.charCodeAt(0)-32)+" ";
			}
		}
	}else{
		for(var i=0 ; i < Calc.elements.length; i++){
			var _char=Calc.elements[i].value
			if(Calc.elements[i].type=="button"&&_char>="A"&&_char<="Z"&&_char.length==1){
				Calc.elements[i].value=" "+String.fromCharCode(_char.charCodeAt(0)+32)+" ";
			}
		}
	}
	capsLockFlag=!capsLockFlag;
}
		
initCalc();
